﻿<%@ Page Language="VB" MasterPageFile="~/masterpages/MaestraReporte.master" AutoEventWireup="false"
    CodeFile="colaps.aspx.vb" Inherits="Reportes_colaps" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    <script type="text/javascript" src="../jscripts/jquery.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            //ocultar message_body después de la primera
            $(".message_list .message_body:gt(0)").hide();

            //ocultar li mensaje después de la quinta
            $(".message_list li:gt(4)").hide();


            //cambiar message_body
            $(".message_head").click(function() {
                $(this).next(".message_body").slideToggle(500)
                return false;
            });


        });
    </script>

    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        /* message display page */
        .message_list
        {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 383px;
        }
        .message_head
        {
            padding: 5px 10px;
            cursor: pointer;
            position: relative;
            border: 2px solid #D0E8F4;
            background-color: #ECF8FD;
        }
        .message_head .timestamp
        {
            color: #666666;
            font-size: 95%;
            position: absolute;
            right: 10px;
            top: 5px;
        }
        .message_body
        {
            padding: 5px 10px 15px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <ol class="message_list">
        <li>
            <p class="message_head">
                <cite>someone:</cite> <span class="timestamp"></span>
            </p>
            <div class="message_body">
                <p>
                    Hello Nick,<br />
                    <br />
                    This is the latest message display. The rest are collapsed by default</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>nick:</cite> <span class="timestamp"></span>
            </p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
    </ol>
</asp:Content>
